<template>
  <div class="my-like-container" v-loading="isLoading">
    <div class="a-container" :key="item.id" v-for="item of pageInfo.list">
      <div class="img-container" :ref="'img_container_' + item.id">
        <div class="img-info">{{item.title}}</div>
        <div class="action-bar">
            <span>
              <i class="el-icon-download img-btn" @click="doDownload(item.imgPath)"></i>
            </span>
          <span>
            <i class="el-icon-star-off img-btn" @click="doAddLike(item)"></i>
            </span>
        </div>
      </div>
    </div>
    <div style="text-align: center; height: 60px; padding-top: 14px; clear: left" v-if="pageInfo.list.length > pageInfo.pageSize">
      <el-pagination
        style="background-color: #323332"
        @current-change="doPageChange($event)"
        :current-page.sync="pageInfo.currentPage"
        :page-size="pageInfo.pageSize"
        :background="true"
        layout="total, prev, pager, next"
        :total="pageInfo.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {AppImgBaseUrl} from '../../utils/AppConstant'
import {diImg} from '../../utils/downloadImg'
const ImgContainerRefBase = 'img_container_'

export default {
  name: 'Mine',
  data () {
    return {
      isLoading: false,
      pageInfo: {
        list: [],
        total: 0,
        pageSize: 10,
        currentPage: 1
      }
    }
  },
  computed: {
    userName: function () {
      return ''
    }
  },
  created () {
  },
  mounted () {
    if (this.$store.getters.isLogined === false) {
      this.$router.push({name: 'Login'})
      return
    }

    this.loadMyLikeImgs(1)
  },
  methods: {
    loadMyLikeImgs (tmpPage = 1) {
      if (tmpPage < 1) {
        tmpPage = 1
      }
      const loadingRef = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(153, 153, 153, 0.7)'
      })
      const param = {
        pageNo: tmpPage,
        pageSize: 9
      }
      this.$post(`api/MyLikeVc/myLike`, param).then(tmpPage => {
        this.parseImgList(tmpPage.list)
        this.pageInfo.total = tmpPage.total
        this.pageInfo.currentPage = tmpPage.pageNo
        this.pageInfo.pageSize = tmpPage.pageSize
      }).finally(() => {
        loadingRef.close()
      })
    },
    parseImgList (list) {
      this.pageInfo.list.splice(0, this.pageInfo.list.length)
      list.forEach(tmpV => {
        tmpV.img_url = AppImgBaseUrl + tmpV.imgPath
        tmpV.thumbnail = AppImgBaseUrl + 'thumbnail_' + tmpV.imgPath
        this.pageInfo.list.push(tmpV)
      })
      this.$nextTick(() => {
        this.pageInfo.list.forEach(value1 => {
          const tmpArr = this.$refs[ImgContainerRefBase + value1.id]
          if (tmpArr !== undefined && tmpArr.length > 0) {
            tmpArr[0].style.backgroundImage = `url(${value1.thumbnail})`
          }
        })
      })
    },
    doDownload (imgPath) {
      const isStarted = diImg(imgPath)
      if (isStarted === false) {
        this.$message.error('操作失败, 请下载DI Manager客户端来设置桌面壁纸')
      }
    },
    doAddLike (item) {
      this.isLoading = true
      const param = {imgId: item.imgId, isAddToLike: 0}
      this.$post('api/MyLikeVc/likeOrNotImg', param).then(resp => {
        this.$message.success('操作成功')
        this.loadMyLikeImgs(0)
      }).finally(() => {
        this.isLoading = false
      })
    },
    doPageChange (tmpPage) {
      this.loadMyLikeImgs(tmpPage)
    }
  }
}
</script>

<style scoped>
  .my-like-container {
    position: relative;
    overflow: auto;
    height: 100vh;
    right: -14px;
    left: 0px;
  }
</style>
